<template>
  <view class="wechatWrap">
    <view class="wechatTopUser">
      <up-image
        :showLoading="true"
        :src="`${env.VITE_OSS_BUCKET}${articleInfo.images}`"
        width="48rpx"
        height="48rpx"
        shape="circle"
      ></up-image>
      {{ articleInfo.authorName }}
    </view>
    <view class="wechatTime">{{ filterTime(articleInfo.createdTimestamp) }}</view>
    <view class="wechatMessageItem">
      <view class="wechatMessageItemHeadImg">
        <up-image
          :showLoading="true"
          :src="`${env.VITE_OSS_BUCKET}${articleInfo.images}`"
          width="86rpx"
          height="86rpx"
          shape="circle"
        ></up-image>
      </view>
      <view class="wechatMessageItemCard">
        <view class="cardBaseData">
          <view class="cardImg">
            <up-image
              :showLoading="true"
              :src="`${env.VITE_OSS_BUCKET}${articleInfo.images}`"
              width="110rpx"
              height="110rpx"
              bgColor="#FFFFFF"
            ></up-image>
          </view>
          <view class="cardText">
            <view class="title u-line-2">
              {{ articleInfo.title }}
            </view>
            <view class="desc">通过以上链接，请求与您交换微信号</view>
          </view>
        </view>
        <view class="confirmBtn" @click="confirmSwitch">确认交换</view>
      </view>
    </view>
    <view class="wechatTime">3月11日 19:17</view>
    <view class="wechatMessageItem">
      <view class="wechatMessageItemHeadImg">
        <up-image
          :showLoading="true"
          :src="src"
          width="86rpx"
          height="86rpx"
          shape="circle"
        ></up-image>
      </view>
      <view class="wechatMessageItemCard">
        <view class="cardBaseData">
          <view class="cardText">
            <view class="title u-line-2">我的微信号：1234567890</view>
          </view>
        </view>
        <view class="confirmBtn">点击复制</view>
      </view>
    </view>
    <view class="wechatTime">3月11日 19:17</view>
    <view class="wechatMessageItem right">
      <view class="wechatMessageItemCard">
        <view class="cardBaseData">
          <view class="cardText">
            <view class="title u-line-2">我的微信号：1234567890</view>
          </view>
        </view>
      </view>
      <view class="wechatMessageItemHeadImg">
        <up-image
          :showLoading="true"
          :src="src"
          width="86rpx"
          height="86rpx"
          shape="circle"
        ></up-image>
      </view>
    </view>
  </view>
</template>

<script>
import {defineComponent, ref} from "vue";
import switchWechatManagement from '@/api/switchWechatManagement'
import store from '@/store'
import ArticleManagement from '@/api/articleManagement'
import {filterTime} from '../../../utils/formatTime'

export default defineComponent({
  methods: {
    filterTime,
    confirmSwitch() {
      console.log("confirmSwitch")
      switchWechatManagement.approveSwitchWechatId({

      })
        .then((res) => {
          console.log("approveSwitchWechatId", res);
        })
        .catch(err => {
          console.log("approveSwitchWechatId", err);
        });
    }
  },
  props: {
    item: {
      type: Object,
      default: () => {
      },
    },
  },
  setup(props) {
    console.log("detailSwitchWechatItem", props)
    const wxChatInfo = ref({});
    if (!props.item.wxChatInfo) {
      switchWechatManagement.getAllSwitchWechatId().then((res) => {
        console.log("getAllSwitchWechatId", res);
        wxChatInfo.value = res.data.find((item) => item.receiverUserId === store.state.user.userInfo.userId);
      }).catch((err) => {
        console.log("getAllSwitchWechatId", err);
      });
    } else {
      wxChatInfo.value = props.item.wxChatInfo;
    }
    console.log("wxChatInfo", wxChatInfo.value)
    const articleId = props.item.articleId;
    const articleInfo = ref({
      title: ""
    })
    ArticleManagement.getArticleDetail(articleId).then((res) => {
      console.log("articleInfo", res);
      articleInfo.value = res.data;
    }).catch((err) => {
      console.log("articleInfo err", err);
    });

    return {
      articleInfo
    }
  },
});
</script>

<style lang="scss">
.wechatTopUser {
  width: 100%;
  height: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f3f3f3;
  font-size: 24rpx;
  color: #666666;
  background-color: #f3f3f3;
  margin-bottom: 70rpx;
}

.wechatTime {
  font-size: 20rpx;
  color: #666666;
  text-align: center;
  margin-bottom: 8rpx;
}

.wechatMessageItem {
  display: flex;
  margin-bottom: 40rpx;
}

.wechatMessageItemHeadImg {
  margin-right: 16rpx;
  margin-left: 30rpx;
}

.wechatMessageItemCard {
  background-color: #f3f3f3;
  border-radius: 15rpx;
  padding: 30rpx;
  max-width: 564rpx;
  margin-top: 24rpx;
}

.cardBaseData {
  display: flex;
  align-items: center;
}

.cardImg {
  margin-right: 16rpx;
}

.cardText {
  .title {
    font-size: 24rpx;
    color: #333333;
    margin-bottom: 8rpx;
  }

  .desc {
    font-size: 22rpx;
    color: #666;
  }
}

.confirmBtn {
  width: 100%;
  text-align: center;
  font-size: 26rpx;
  color: #00a0e9;
  padding-top: 24rpx;
  border-top: 1px dashed #dcdcdc;
  margin-top: 24rpx;
}

.wechatMessageItem.right {
  justify-content: flex-end;
}

.right .wechatMessageItemHeadImg {
  margin-left: 16rpx;
  margin-right: 30rpx;
}

.right .wechatMessageItemCard {
  background-color: #BEE9FF;
}
</style>
